import React from "react";
import styles from "./Robot.module.css";
import { defaultAtomsRoot } from "../atomRoot";
import { useRecoilState } from "recoil";

export interface RobotProps {
  id: number;
  name: string;
  email: string;
}

// React.FC 函数式组件的接口
const Robot: React.FC<RobotProps> = ({ id, name, email }) => {
  const [atomRoot, setRoot] = useRecoilState(defaultAtomsRoot);
  // const setState = useContext(AppSetStateContext);
  // const addToCart = () => {
  //     if (setState) {
  //         // state是全局状体里的state对象 => defaultContextValue
  //         setState((state) => {
  //             return {
  //                 ...state,
  //                 shoppingCart: {
  //                     items: [
  //                         // 展开之前存储的items数据
  //                         ...state.shoppingCart.items,
  //                         // 后面的{id, name}是新加入items的数据
  //                         {
  //                             id,
  //                             name
  //                         }
  //                     ],
  //                 }
  //             }
  //         })
  //     }
  // }
  const addToCart = (id, name) => {
    setRoot({
      ...atomRoot,
      shoppingCart: {
        items: [
          ...atomRoot.shoppingCart.items,
          {
            id,
            name,
          },
        ],
      },
    });
  };

  return (
    <div className={styles.cardContainer}>
      <img src={`https://robohash.org/${id}`} alt="robot" />
      <h3>{name}</h3>
      <p>{email}</p>
      <p>作者：{atomRoot.username}</p>
      <button onClick={() => addToCart(id, name)}>加入购物车</button>
    </div>
  );
};

export default Robot;
